<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
  <h3 class="uk-card-title">Default</h3>
  <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<p uk-margin>
  <button class="uk-button uk-button-default uk-button-small">Small button</button>
  <button class="uk-button uk-button-primary uk-button-small">Small button</button>
  <button class="uk-button uk-button-secondary uk-button-small">Small button</button>
</p>

<p uk-margin>
  <button class="uk-button uk-button-default uk-button-large">Large button</button>
  <button class="uk-button uk-button-primary uk-button-large">Large button</button>
  <button class="uk-button uk-button-secondary uk-button-large">Large button</button>
</p>

<dl class="uk-description-list uk-description-list-divider">
  <dt>Description term</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Description term</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
  <dt>Description term</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
<div uk-filter="target: .js-filter">

  <ul class="uk-subnav uk-subnav-pill">
    <li uk-filter-control=".tag-white"><a href="#">White</a></li>
    <li uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
    <li uk-filter-control=".tag-black"><a href="#">Black</a></li>
  </ul>

  <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
    <li class="tag-white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li class="tag-blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li class="tag-white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li class="tag-white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li class="tag-black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li class="tag-black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li class="tag-blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li class="tag-black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
    <li class="tag-blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li class="tag-white">
      <div class="uk-card uk-card-default uk-card-body">Item</div>
    </li>
    <li class="tag-blue">
      <div class="uk-card uk-card-primary uk-card-body">Item</div>
    </li>
    <li class="tag-black">
      <div class="uk-card uk-card-secondary uk-card-body">Item</div>
    </li>
  </ul>

</div>

<router-outlet></router-outlet>
